import React,{useState,useEffect}from 'react'
import axios from 'axios'
import {Table,Tag,Button,Modal,Popover,Switch} from 'antd'
import {EditOutlined,DeleteOutlined,ExclamationCircleOutlined } from '@ant-design/icons'
const { confirm } = Modal;
 
export default function RightList() {
  const columns = [
    {
      title: 'id',
      dataIndex: 'id',
      render(id) {
          return <b>{id}</b>
      },
    },
    {
      title: 'title',
      dataIndex: 'title',
    },
    {
      title: '权限路径',
      dataIndex: 'key',
      render(key) {
        return <Tag color="orange">{key}</Tag>
      },
    },
    {
        title:'操作',
        render(item){
            return <div>
              <Popover content={<div>
                    <Switch checked={item.pagepermisson} onChange={()=>switchMethod(item)}  />
                  </div>}  title="页面配置项">
                <Button shape="circle" type="primary" icon={<EditOutlined/>} disabled={item.pagepermisson===undefined} ></Button>
              </Popover>
               
                <Button shape="circle" type="primary" danger icon={<DeleteOutlined/>} onClick={()=>comfirmDelete(item)} ></Button>
            {/*
                这里的item是点击对象，而我们要传递的item是  遍历时的item。
                antd组件将datasource遍历，其中的item就是我们传递的item。
            */}
            </div>
        }
    }
  ];
    const [right, setRight] = useState([])
    useEffect(() => {
        axios.get('/rights?_embed=children').then(res=>{
          let list = res.data;
          list.forEach(item => {
              if(item.children?.length===0)
                  item.children="";
          });
          setRight(list);
        })
    }, [])
    const comfirmDelete=(item)=>{
      confirm({
        title: '确认',
        icon: <ExclamationCircleOutlined />,
        content: '是否删除改权限？',
        okText: '是',
        okType: 'danger',
        cancelText: '否',
        onOk() {
          if(item.grade===1){
            const newList =right.filter(data=>data.id!==item.id);
            setRight(newList);
            axios.delete(`/rights/${item.id}`).then(res=>{
            })
          }else{
            const upItem = right.filter(data=>data.id===item.rightId)   //找到二级权限的上一级
            upItem[0].children =upItem[0].children.filter(data=>data.id!==item.id);
            //重新赋值，因为filter只能复制一层，使用这里是直接修改内存里的right表
            setRight([...right])//为了重新渲染，用新数组
            axios.delete(`/children/${item.id}`);
          }
        },
        onCancel() {
        },
      });
    } 
    const switchMethod=(item)=>{
       item.pagepermisson =item.pagepermisson===1?0:1;
      // console.log(right);    发现真的能修改，原因与filter相同
      setRight([...right]);
      if(item.grade===1){
        axios.patch(`/rights/${item.id}`,{
          pagepermisson:item.pagepermisson
        })
      }else{
        axios.patch(`/children/${item.id}`,{
          pagepermisson:item.pagepermisson
        })
      }
      }
    return (
        <div>
            <Table dataSource={right} columns={columns} pagination={{pageSize:5}}  />
        </div>
    )
}
